<template>
  <div>
    <div class="btn-service" @click="qrcode=!qrcode">
      <img src="/static/img/index/index_btn_service.png" alt="">
    </div>
    <div class="qr-service" v-show="qrcode"  @click="qrcode=!qrcode">
      <img src="/static/img/index/index_icon_kefuma.png" alt="">
    </div>
    <!--  style="background-image: url(/static/img/index/top_banner.jpg); height: 30rem" -->
    <div class="swiper-container top-banner" ref="swiper">
      <div class="swiper-wrapper">
        <div class="relative bg-covered swiper-slide" style="background-image: url('/static/img/mob/banner01_bg_mob.jpg')">
          <div class="text-white pt-5 text-center">
            <h1 class="pt-5" style="font-size: 3rem">重新定义学习</h1>
            <div class="mt-3 mb-5" style="font-size: 1.2rem">一个有思想的企业大学云服务系统</div>
            <div class="experience-wrap">
              <a  @click="isEnter=true" class="experience">注册 <i class="fa fa-chevron-circle-right"></i></a>
            </div>
          </div>
        </div>
        <div class="relative bg-covered swiper-slide" style="background-image: url('/static/img/mob/banner02_bg_mob.jpg')">
          <div class="text-white pt-5 text-center">
            <h1 class="pt-5" style="font-size: 3rem">益策教育力作</h1>
            <div class="mt-3 mb-5" style="font-size: 1.2rem">引领中国企业组织学习迈进3.0时代</div>
            <div class="experience-wrap">
              <a @click="isEnter=true" class="experience">注册 <i class="fa fa-chevron-circle-right"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="bg-f2f2">
      <div class="container py-5">
        <h3 class="text-center font-weight-bold" style="line-height: 1.5">
          组织学习3.0时代：<br>
          打造平台+个人的赋能系统
        </h3>
        <div class="text-999 paragraph my-3">
          没有成功的企业，只有时代的企业。人才发展与培训已经成为企业持续增长的支撑力量。人才资本成为企业的又一重要竞争优势。基于移动互联带来技术变革，企业学习进入3.0时代，
          当组织成为平台，传统的企业培训已经无法满足高频学习、知识连接、实施管理的复合需求，众多企业人才培养体系、新建企业大学，迫切需要用新思维、新理念构建学习平台。<br>
          作为中国B2B企业教育领军者，益策基于15年专业经验，洞察企业真实需求，
          整合业界顶级理念与内容服务，以移动互联+为亮点，提供最为完整的SAAS云解决方案服务。帮助企业迈进组织学习3.0时代，为每一位员工赋能，让人才发展成为组织发动机。
        </div>
        <div class="mb-4 d-flex justify-content-between mx-2 mt-4">
          <div class="d-flex">
            <img src="/static/img/mob/index_adv2_icon1_mob.png" alt="" class="icon-pic">
            <span class="ml-2">从培训到做中学</span>
          </div>
          <div class="d-flex">
            <img src="/static/img/mob/index_adv2_icon2_mob.png" alt="" class="icon-pic">
            <span class="ml-2">全员职业化能力普及</span>
          </div>
        </div>
        <div class="d-flex justify-content-between mx-2">
          <div class="d-flex">
            <img src="/static/img/mob/index_adv2_icon3_mob.png" alt="" class="icon-pic">
            <span class="ml-2">多样学习形态</span>
          </div>
          <div class="d-flex">
            <img src="/static/img/mob/index_adv2_icon4_mob.png" alt="" class="icon-pic">
            <span class="ml-2">总部向终端直接赋能</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white">
      <div class="container py-5">
        <h3 class="text-center font-weight-bold" style="line-height: 1.5">
          企业痛点：呼求技术实现与<br>内容配套的服务体系
        </h3>
        <div class="my-5 row px-2">
          <div class="col-6 py-3 px-4 brb-ccc system">
            <div class="text-center">
              <img src="/static/img/index/index_adv3_icon1.png" alt="">
              <div class="text-999 font-xxxl">缺平台</div>
            </div>
            <div class="text-999 mt-2">搭建一个完整的培训体系，让每个岗位都能得到专业的学习发展。</div>
          </div>
          <div class="col-6 py-3 px-4 bb-ccc system">
            <div class="text-center">
              <img src="/static/img/index/index_adv3_icon2.png" alt="">
              <div class="text-999 font-xxxl">起点低</div>
            </div>
            <div class="text-999 mt-2">企业认知有限，希望高起点、跨越式、顶尖理念构建一所企业大学。</div>
          </div>
          <div class="col-6 py-3 px-4 brb-ccc system">
            <div class="text-center">
              <img src="/static/img/index/index_adv3_icon3.png" alt="">
              <div class="text-999 font-xxxl">成本高</div>
            </div>
            <div class="text-999 mt-2">通过新的学习模式，减少传统集中培训时间和管理成本。</div>
          </div>
          <div class="col-6 py-3 px-4 bb-ccc system">
            <div class="text-center">
              <img src="/static/img/index/index_adv3_icon4.png" alt="">
              <div class="text-999 font-xxxl">参与低</div>
            </div>
            <div class="text-999 mt-2">活跃培训形式，通过自适性学习，提升学习热情与参与度。</div>
          </div>
          <div class="col-6 py-3 px-4 brb-ccc system">
            <div class="text-center">
              <img src="/static/img/index/index_adv3_icon5.png" alt="">
              <div class="text-999 font-xxxl">实施繁</div>
            </div>
            <div class="text-999 mt-2">课程实施标准化，学习数据可视化，让培训经理从琐事解脱。</div>
          </div>
          <div class="col-6 py-3 px-4 system bb-ccc">
            <div class="text-center">
              <img src="/static/img/index/index_adv3_icon6.png" alt="">
              <div class="text-999 font-xxxl">转化难</div>
            </div>
            <div class="text-999 mt-2">传统学习模式转化难以管理，使得培训预算回报有限。</div>
          </div>
          <div class="col-6 py-3 px-4 br-ccc system">
            <div class="text-center">
              <img src="/static/img/index/index_adv3_icon7.png" alt="">
              <div class="text-999 font-xxxl">沉淀难</div>
            </div>
            <div class="text-999 mt-2">能够萃取与传承内部知识，让组织实践全员共享。</div>
          </div>
          <div class="col-6 py-3 px-4 system">
            <div class="text-center">
              <img src="/static/img/index/index_adv3_icon8.png" alt="">
              <div class="text-999 font-xxxl">找课难</div>
            </div>
            <div class="text-999 mt-2">便捷连接一流师资课程，不再为“找课程/找老师”焦虑。</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-f2f2">
      <div class="container py-5">
        <div class="text-center font-xxxl mb-4">
          基于<span class="text-primary">20000+</span>企业培训服务经验 <br>历时<span class="text-primary">2年</span>实战研发系统构建
        </div>
        <h3 class="text-center font-weight-bold mb-4" style="line-height: 1.5">
          学乎智学云：“技术+内容+服务”解决方案
        </h3>
        <div class="pt-3 swiper-container mx-0 scheme" ref="swiper2">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="bg-white mt-5 px-0 b-ccc mx-4" style="min-height: 448px;">
                <div class="text-center" style="margin-top: -3.5rem">
                  <img src="/static/img/index/index_adv4_icon1.png" alt="">
                </div>
                <div class="text-999 py-3 px-4 bb-ccc mb-3">
                  Saas云服务模式，企业无需技术人员、
                  平台自动更新。
                </div>
                <ul class="pr-4">
                  <li class="mt-3">
                    培训管理数据化
                  </li>
                  <div class="text-999">基于不同岗位层级指定或分配学习内容，监控进度，促进转化。</div>
                  <li class="mt-3">
                    学习地图工具化
                  </li>
                  <div class="text-999">基于岗位胜任力及T 型人才观，让企业以顶级模型为员工规划学习计划。</div>
                  <li class="mt-3">
                    移动学习场景化
                  </li>
                  <div class="text-999">移动学习特色，服务成人学习，易学易用。</div>
                  <li class="mt-3">
                    内部知识萃取
                  </li>
                  <div class="text-999">业务骨干及经理人微课制作、沉淀管理、内部分发。</div>
                </ul>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="bg-white mt-5 px-0 b-ccc mx-4"  style="min-height: 448px;">
                <div class="text-center" style="margin-top: -3.5rem">
                  <img src="/static/img/index/index_adv4_icon2.png" alt="">
                </div>
                <div class="text-999 py-3 px-4 bb-ccc mb-3">
                  以实战为本，整合各个岗位职业学习内容产品，打造行业学院。
                </div>
                <ul class="pr-4">
                  <li class="mt-3">
                    面授+：传统面授课程升级
                  </li>
                  <div class="text-999">线下+线上，提高面授学习吸收度与转化率。</div>
                  <li class="mt-3">
                    轻学：个人自主在线学习
                  </li>
                  <div class="text-999">颗粒化+系统化内容，纯在线学习的主体模式。</div>
                  <li class="mt-3">
                    混学：复兴师徒制，实现做中学
                  </li>
                  <div class="text-999">五步教学法，满足企业关键岗位能力发展与人才培养需求。</div>
                  <li class="mt-3">
                    学乎商城
                  </li>
                  <div class="text-999">汇集各类学习产品，企业可在线采购，植入学习平台分发学习任务。</div>
                </ul>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="bg-white mt-5 px-0 b-ccc mx-4"  style="min-height: 448px;">
                <div class="text-center" style="margin-top: -3.5rem">
                  <img src="/static/img/index/index_adv4_icon3.png" alt="">
                </div>
                <div class="text-999 py-3 px-4 bb-ccc mb-3">
                  驱动培训管理、内部知识传播改造，实现企业学习体系完整转型。
                </div>
                <ul class="pr-4">
                  <li class="mt-3">
                    培训管理者转型学习
                  </li>
                  <div class="text-999">系统帮助企业培训管理团队完成移动互联时代能力认知与学习转型。</div>
                  <li class="mt-3">
                    移动互联企业大学构建咨询
                  </li>
                  <div class="text-999">从顶层设计到落地实施的深度咨询服务。</div>
                  <li class="mt-3">
                    组织内部传统教学模式改造
                  </li>
                  <div class="text-999">对标移动互联时代场景，重新定义内部知识呈现与学习模式。</div>
                </ul>
              </div>
            </div>
          </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div>
    <div class="bg-white">
      <div class="container py-5">
        <div class="text-center font-xxxl mb-4">
          基于<span class="text-primary">大数据</span>智能匹配学习内容<br> 跟进<span class="text-primary">学习任务</span>实现自动报告
        </div>
        <h3 class="text-center font-weight-bold mb-0" style="line-height: 1.5">
          无方法，不智学：<br>核心方法与教育理念
        </h3>
        <div class="swiper-container pt-0 mx-1" ref="swiper3">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="bg-white mt-5 px-0 mx-4">
                <img src="/static/img/index/index_adv5_icon1.png" alt="" class="w-100">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="bg-white mt-5 px-0 mx-4">
                <img src="/static/img/index/index_adv5_icon2.png" alt="" class="w-100">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="bg-white mt-5 px-0 mx-4">
                <img src="/static/img/index/index_adv5_icon3.png" alt="" class="w-100">
              </div>
            </div>
          </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div>
    <div class="bg-f2f2 py-5">
      <div class="container">
        <div class="text-center font-xxxl mb-4 mt-2">
          Saas<span class="text-primary">云端</span>自动化功能迭代<br> 响应企业需求<span class="text-primary">实时</span>研发升级
        </div>
        <h3 class="text-center font-weight-bold mb-4" style="line-height: 1.5">
          核心功能：贴合企业场景，<br>培训实施得心应手
        </h3>
        <img src="/static/img/mob/index_adv5_bg_mob.png" alt="" class="w-100">
      </div>
    </div>
    <div class="bg-covered free-use pt-4" style="background-image: url('/static/img/mob/index_adv6_bg_mob.png')">
      <h3 class="text-center font-weight-bold my-3 mx-5" style="line-height: 1.5">
        免费使用：零门槛构建移动互联企业大学
      </h3>
      <div class="container">
        <div class="use">
          <div class="mt-5 mx-5 pb-3" style="border-bottom: 1px dashed #CCCCCC">
            <div class="d-flex px-4">
              <img src="/static/img/index/index_adv6_icon1.png" alt="" class="mr-3">
              <div class="">
                <h5 style="line-height: 1.3">安全，保障企业数据私密</h5>
                <div class="text-999 mt-1">
                  独立数据<br>
                  加密管理
                </div>
              </div>
            </div>
          </div>
          <div class="mt-3 pb-3 mx-5 " style="border-bottom: 1px dashed #CCCCCC">
            <div class="d-flex px-4">
              <img src="/static/img/index/index_adv6_icon2.png" alt="" class=" mr-3">
              <div class="">
                <h5 style="line-height: 1.3">灵活，支持多种应用场景
                </h5>
                <div class="text-999 mt-1">
                  PC电脑端<br>
                  APP<br>
                  微信公众号
                </div>
              </div>
            </div>
          </div>
          <div class="mt-3 pb-3 mx-5">
            <div class="d-flex px-4">
              <img src="/static/img/index/index_adv6_icon3.png" alt="" class=" mr-3">
              <div class="">
                <h5>全天候在线客服</h5>
                <div class="text-999 mt-1">
                  7*24小时在线<br>
                  随时解决疑难障碍
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center mt-5 mb-4">
          <a @click="isEnter=true" class="experience experience-larger">注册</a>
        </div>
      </div>
      <div class="bt-ddd text-center footer-sec mx-4">
        <!--<img src="/static/img/index/footer_sec_logo.png" class="img-fluid">-->
      </div>
      <div class="text-center text-grey mt-3 px-3">
        粤B2-20050579号-5 广州市益策教育科技有限公司 版权所有
      </div>
      <div class="modal fade overlay-black d-block show" v-if="isEnter" @click="isEnter=false">
        <div class="modal-dialog modal-lg modal-mobile">
          <div class="modal-content mt-center pt-4">
            <h4 class="text-center">请选择注册类型</h4>
            <div class="row justify-content-center py-5 text-center px-3">
              <router-link to="/experience/1" class="p-5 br-eee col ">
                <img src="/static/img/index/open_icon_enterprise.png" alt="">
                <div class="text-dark font-xl mt-2">企业大学</div>
              </router-link>
              <router-link to="/experience/2" class="p-5 br-eee col">
                <img src="/static/img/index/open_icon_organization.png" alt="">
                <div class="text-dark font-xl mt-2">培训机构</div>
              </router-link>
              <router-link to="/experience/3" class="p-5 col">
                <img src="/static/img/index/open_icon_personal.png" alt="">
                <div class="text-dark font-xl mt-2">个人讲师</div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<!--
  讲师中心
-->
<script>
  import changelog from '../assets/changelog'
  import 'swiper/dist/css/swiper.min.css'
  import Swiper from 'swiper'

  var sUserAgent = navigator.userAgent.toLowerCase()
  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'
  var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os'
  var bIsMidp = sUserAgent.match(/midp/i) == 'midp'
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4'
  var bIsUc = sUserAgent.match(/ucweb/i) == 'web'
  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce'
  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile'
  var bIsAndroid = sUserAgent.match(/android/i) == 'android'
  export default {
    name: 'teachers',
    data: () => ({
      colors: ['success', 'info', 'danger', 'primary', 'warning', ''],
      changelog: changelog,
      qrcode: false,
      isEnter:false
    }),
    beforeRouteEnter (to, form, next) {
      if (bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid) {
        next(vm => {
          var swiperOption = {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            pagination: '.top-banner .swiper-pagination',
            paginationClickable: true,
            autoplay: 4000,
            speed: 600,
            loop: true
          }
          var swiperOptionTwo = {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            autoplay: 4000,
            speed: 600,
            loop: true
          }
          var swiperOne = new Swiper(vm.$refs.swiper, swiperOption)
          var swiperTwo = new Swiper(vm.$refs.swiper2, swiperOptionTwo)
          var swiperThree =  new Swiper(vm.$refs.swiper3, swiperOptionTwo)
          vm.$nextTick(() => {
            vm.$emit('loaded')
          })
        })
      }else{
        next({ path: '/' })
      }
    },
    mounted () {
      this.$emit('loaded')
    }
  }
</script>


<style>
  .icon-pic {
    width: 2rem;
    height: 2rem;
  }
  .swiper-slide{
    box-sizing: border-box;
  }
  .swiper-button-prev,.swiper-button-next{
    height: 130px;
    background-size: 100% auto;
    width: 14px !important;
  }
  .swiper-button-prev {
    background-image: url("/static/img/mob/slide_icon_left.png");
    left: 0px !important;
  }
  .swiper-button-next {
    right: 0 !important;
    background-image: url("/static/img/mob/slide_icon_right.png");
  }
  .experience {
    color: white;
    font-size: 1.5rem;
    background: linear-gradient(150deg, #3962c9 50%, #adbfec);
    padding: .6rem 2rem;
    border-radius: 27px;
  }
  .experience-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 5rem;
  }
  .experience:hover, .experience:active {
    background: linear-gradient(150deg, #3857af 50%, #7d8bb5);
    color: white;
    box-shadow: 0px 0px 20px #fff;
  }
  .experience-larger:hover {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
  }
  .top-banner {
    width: 100%;
    height: 620px;
  }
  .bg-f2f2 {
    background-color: #f2f2f2;
    background-color: #f2f2f2;
  }
  .paragraph {
    margin-right: .5rem;
    margin-left: .5rem;
    line-height: 2;
  }
  .brb-ccc {
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
  }
  .bb-ccc {
    border-bottom: 1px solid #CCCCCC;
  }
  .br-ccc {
    border-right: 1px solid #CCCCCC;
  }
  .b-ccc {
    border: 1px solid #CCCCCC;
  }
  /*.system:hover{*/
  /*box-shadow: 0px 0px 10px rgba(0,0,0,0.26);*/
  /*}*/
  .free-use {
    height: 700px;
  }
  .v-top {
    vertical-align: top;
  }
  .experience-larger {
    display: inline-block;
    width: 10rem;
    height: 3rem;
    line-height: 2rem;
    border-radius: 31px;
    font-size: 1.5rem;
  }
  .swiper-pagination-bullet-active {
    background-color: #ff4552 !important;
    border-radius: 5px !important;
    width: 20px !important;
  }
  .text-999 {
    color: #999999 !important;
  }
  .system img{
    width: 3.2rem;
  }
  .scheme img{
    width: 7rem;
  }
  .use img {
    width: 2.5rem;
    height: 2.5rem;
  }
  .btn-service{
    position: fixed;
    bottom: 3rem;
    right: 1rem;
    z-index: 11111;
  }
  .btn-service > img{
    width: 3.5rem;
  }
  .qr-service{
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 10000;
  }
  .qr-service>img{
    width: 18rem;
    margin-top: 50%;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
  }
  @media (max-width: 575px) {
    .modal-mobile img{
      width: 3rem !important;
    }
  }
</style>